<script setup>
import { ref, onMounted } from 'vue'
import { getOwnSaleOrderAPI, shipMentsAPI } from '@/apis/order'
import { ElMessage } from 'element-plus';

const orderList = ref([])
const input = ref('')

const orderStatus = (status) => {
    if (status === 1) return '待付款'
    if (status === 2) return '代发货'
    if (status === 3) return '待收货'
    if (status === 4) return '已完成'
}

const getOrders = async () => {
    const res = await getOwnSaleOrderAPI()
    console.log(res);
    orderList.value = res.data
}

const fahuo = async (orderId) => {
    const res = await shipMentsAPI(orderId)
    if (res.code === 2000) {
        getOrders()
        ElMessage({ type: 'success', message: '操作成功' })
    }
}

onMounted(() => {
    getOrders()
})
</script>

<template>
<div class="orderManage-page">
    <div class="orderManage-title">订单管理</div>
    <!-- <div class="searchArea">
        <div class="serach-input">
            <el-input
            v-model="input"
            class="w-50 m-2"
            size="large"
            placeholder="订单号"
            :prefix-icon="Search"
            />
        </div>
        <a href="javascript:;" class="serach-btn" @click="">搜索</a>      
    </div> -->
    <table class="table">
        <thead style="background-color: #f2f2f2; margin-top: 20px; font-size: 14px; height: 50px;">
            <th width="120">商品图片</th>
            <th width="180">商品名</th>
            <th width="200">订单号</th>
            <th widith="160">付款时间</th>
            <th width="110">状态</th>
            <th width="150">操作</th>
        </thead>
        <tbody>
            <tr v-for="i in orderList" :key="i.id">
                <td class="good-image">
                    <div class="image"><img :src="i.image"></div>
                </td>
                <td class="td"><p>{{i.productName}}</p></td>
                <td class="td"><p>{{i.orderId}}</p></td>
                <td class="td">
                    <p v-if="i.status === 1">无</p>
                    <p v-else>{{i.checkoutTime}}</p>
                </td>
                <td class="td"><p style="color: #39bf3e">{{ orderStatus(i.status) }}</p></td>
                <td class="td">
                    <div class="opretion" v-if="i.status === 2">
                        <el-popconfirm icon-color="#39bf3e"  title="确认发货吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="fahuo(i.orderId)">
                            <template #reference>
                                <a href="javascript:;" class="opretion-btn green">发货</a>
                            </template>
                        </el-popconfirm>
                    </div>
                    <div style="text-align: center; font-size: 16px;" v-else>无</div>
                </td>
            </tr>
            <tr v-if="orderList.length === 0">
                <td colspan="6"><div class="order-none">
                    <el-empty description="您没有卖出的商品">
                    </el-empty>
                </div></td>
            </tr>
        </tbody>
    </table>

</div>
</template>

<style scoped lang='scss'>
.orderManage-page {
    width: 100%;
    padding: 20px 40px;
    min-height: 700px;
    background-color: #fff;
    font-size: 20px;

    .orderManage-title {
        font-size: 21px;
        padding: 15px 0;
        border-bottom: 1px solid #e8e8e8;
    }

    .searchArea {
        margin-top: 10px;
        height: 35px;

        .serach-input {
            width: 300px;
            float: left;
        }
        .serach-btn {
                display: block;
                margin-left: 350px;
                width: 70px;
                height: 40px;
                line-height: 40px;
                border-radius: 4px;
                font-size: 14px;
                color: #fff;
                background-color: #39bf3e;
                text-align: center;
                margin: 10px 0;
                margin-left: 310px;
            }
    }

    table{
        border-collapse: collapse; 
        border: none;  
        border-collapse: separate; border-spacing: 0px 10px;
    }
    p {
        text-align: center;
        font-weight: 400;
        font-size: 14px;
    }
    .table {
        width: 100%;
        margin-top: 10px;
        .order-none {
            text-align: center;
            padding: 110px 0;
            background: #fff;
        }
        .good-image {
            display: flex;
            align-items: center;
            justify-content: center;
            .image {
                width: 100px;
                height: 100px;
            }
        }
        .opretion {
            display: flex;
            justify-content: center;

            .opretion-btn {
                width: 50px;
                height: 30px;
                line-height: 30px;
                border-radius: 4px;
                font-size: 12px;
                color: #ffffff;
                text-align: center;
                font-weight: 400;
            }
        }
    }
}    
.bule {
    background-color: rgb(20, 167, 225);
}
.green {
    background-color: #39bf3e;
}  
.red {
    background-color: rgb(220, 47, 47);
}
</style>